<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    dialogWidth="1000px"
  >
    <template #searchPanel>
      <search-panel ref="searchPanel" v-slot="{ form }" @search="search" @insert="addHandle" :showAddButton="true" :addPer="authConfig.add" :selectPer="authConfig.query">
        <el-select clearable v-model="form.carBrandId" style="width: 150px" placeholder="品牌" filterable @change="brandChangeHandle">
          <el-option v-for="item in brandList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
        <el-select clearable v-model="form.carSeriesId" style="width: 150px" placeholder="车系" filterable @change="seriesChangeHandle">
          <el-option v-for="item in vehicleList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
        <el-select clearable v-model="form.carTimeTypeId" style="width: 150px" placeholder="年款" filterable @change="timeTypeChangeHandle">
          <el-option v-for="item in timeTypeList" :key="item" :value="item" :label="item"/>
        </el-select>
        <el-select clearable v-model="form.carModelId" style="width: 200px" placeholder="车型" filterable @change="modelChangeHandle">
          <el-option v-for="item in modelList" :key="item.id" :value="item.id" :label="item.modelName"/>
        </el-select>
        <job-shop v-model="form.storeId" placeholder="所属门店" />
      </search-panel>
    </template>

    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{row}">
          <i class="el-icon-edit" title="编辑" style="cursor: pointer;" v-permission="authConfig.edit" @click="handleDataAfferentChange(row, '编辑')"></i>
          <i class="el-icon-delete" title="删除" style="color:red; margin-left: 20px;cursor: pointer" v-permission="authConfig.del" @click="handleDataDelete(row)"></i>
        </template>
      </data-table>
      <!--工具条-->

    </template>
    <template #dialog>
      <dialog-data-form :edit-data="dialogData"  @operate="handleDataOperate"/>
    </template>
  </base-layout>
</template>

<script>
  import {
    pageList,
    save,
    update,
    deleteById,
    detailById
  } from '@/api/pre-sale/advertManagement/comparison'
  import {
    getAllBrand,
    getSeries,
    getModelTimeType,
    getModelRank
  } from '@/api/after-sale/systemManage/carModel'
  import baseMixin from '@/mixins/base'
  import DialogDataForm from './components/DialogDataForm.vue'

  export default {
    components: {
      DialogDataForm
    },
    mixins: [
      baseMixin({
        findData: pageList,
        addData: save,
        deleteData: deleteById,
        dataName: ['content', 'totalRecords'],
        findDataById: detailById,
        updateData: update,
        idName: 'id'
      })
    ],
    data() {
      this.authConfig = {
        query: 'sh:advertising:carpk:page',
        add: 'sh:advertising:carpk:create',
        edit: 'sh:advertising:carpk:update',
        del: 'sh:advertising:carpk:deleted'
      }

      return {
        dialogVisible: false,
        tableColumnAttributes: [
          { name: '品牌', value: 'carBrandName', type: 'text' },
          { name: '车系', value: 'carSeriesName', type: 'text' },
          { name: '年款', value: 'timeType', type: 'text' },
          { name: '车型', value: 'carModelName', type: 'text' },
          { name: '门店', value: 'storeName', type: 'text' },
          { name: '创建人', value: 'createUser', type: 'text' },
          { name: '创建时间', value: 'createTime', type: 'text' }
        ],
        brandList: [],
        vehicleList: [],
        timeTypeList: [],
        modelList: []
      }
    },
    async created() {},
    methods: {
      addHandle() {
        this.dialogVisible = true
        this.dialogData = null
        this.dialogTitle = '新增车型对比'
      },
      dialogClose() {
        this.dialogVisible = false
      },
      search(form) {
        this.searchOptions = {
          storeId: form.storeId,
          carBrandId: form.carBrandId,
          carSeriesId: form.carSeriesId,
          carTimeTypeId: form.carTimeTypeId,
          carModelId: form.carModelId
        }
        this.currentPage = 1
        this.setTableData()
      },
      brandChangeHandle(carBrandId) {
        const searchForm = this.$refs.searchPanel.form
        searchForm.carSeriesId = ''
        searchForm.carTimeTypeId = ''
        searchForm.carModelId = ''
        this.vehicleList = []
        this.timeTypeList = []
        this.modelList = []
        if (carBrandId) {
          this.requestVehicleList(carBrandId)
        }
      },
      seriesChangeHandle(carSeriesId) {
        const searchForm = this.$refs.searchPanel.form
        const { carBrandId } = searchForm
        searchForm.carTimeTypeId = ''
        searchForm.carModelId = ''
        this.timeTypeList = []
        this.modelList = []
        if (carSeriesId) {
          this.requestModelTimeType(carBrandId, carSeriesId)
        }
      },
      timeTypeChangeHandle(carTimeTypeId) {
        const searchForm = this.$refs.searchPanel.form
        const { carBrandId, carSeriesId } = searchForm
        searchForm.carModelId = ''
        this.modelList = []
        if (carTimeTypeId) {
          this.requestCarModelList(carBrandId, carSeriesId, carTimeTypeId)
        }
      },
      modelChangeHandle(xxx) {
        this.$refs.searchPanel.$forceUpdate()
      },
      // 请求品牌
      requestCarBrandList() {
        getAllBrand().then(({ success, data }) => {
          if (success) {
            this.brandList = data || []
          }
        })
      },
      // 请求车系
      requestVehicleList(brandId) {
        getSeries(brandId).then(({ success, data }) => {
          if (success) {
            this.vehicleList = data || []
          }
        })
      },
      // 请求年款
      requestModelTimeType(brandId, seriesId) {
        getModelTimeType(brandId, seriesId).then(({ success, data }) => {
          if (success) {
            this.timeTypeList = data || []
          }
        })
      },
      // 请求车型
      requestCarModelList(brandId, seriesId, timeTypeId) {
        getModelRank(brandId, seriesId, timeTypeId).then(({ success, data }) => {
          if (success) {
            this.modelList = data || []
          }
        })
      }
    },
    mounted() {
      this.requestCarBrandList()
    }
  }
</script>

<style lang="scss" scoped>
  .vLine {
    border-left: solid 3px black;
    height: 16px;
    vertical-align: bottom;
    display: inline-block;
  }
</style>
